<!--
*- coding = utf-8 -*-
#@Time : 2023-10-18 14:16
#@Author : 管茂良
#@File : index.vue
#@web  : www.php-china.com
#@Software: WebStorm
-->
<template>
    <view>
        <u-collapse :item-style="aa">
            <u-collapse-item title="在线好友">
                <view class="content" style="background:white;">
                    <CommonList :title="'设置'" :isShowLineStyle="true" :lineStyle="'width:95%'" >
                        <template #leftSlot>
                            <view style="width: 35px;height:35px;" class="margin-right-10">
                                <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="'/static/img/doctor_img01.png'"/>
                            </view>
                        </template>
                        <template #rightSlot></template>
                    </CommonList>
                    <CommonList :title="'设置'" :isShowLineStyle="false" >
                        <template #leftSlot>
                            <view style="width: 35px;height:35px;" class="margin-right-10">
                                <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="'/static/img/doctor_img01.png'"/>
                            </view>
                        </template>
                        <template #rightSlot></template>
                    </CommonList>
                </view>
            </u-collapse-item>
            <u-collapse-item title="离线好友">
                <view class="content" style="background:white;">
                    <CommonList :title="'设置'" :isShowLineStyle="true" :lineStyle="'width:95%'" >
                        <template #leftSlot>
                            <view style="width: 35px;height:35px;" class="margin-right-10">
                                <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="'/static/img/doctor_img01.png'"/>
                            </view>
                        </template>
                        <template #rightSlot></template>
                    </CommonList>
                    <CommonList :title="'设置'" :isShowLineStyle="false" >
                        <template #leftSlot>
                            <view style="width: 35px;height:35px;" class="margin-right-10">
                                <CommonImage style="width:100%;height:100%" mode="widthFix" :picUrl="'/static/img/doctor_img01.png'"/>
                            </view>
                        </template>
                        <template #rightSlot></template>
                    </CommonList>
                </view>
            </u-collapse-item>
        </u-collapse>
<!--        <uni-collapse ref="collapse" v-model="value" @change="handleChange" :border="true">-->
<!--            <uni-collapse-item :show-animation="true" title="在线好友" style="background:white;" >-->
<!--                -->
<!--            </uni-collapse-item>-->
<!--            <uni-collapse-item :show-animation="true" title="离线好友">-->
<!--                <view class="content">-->
<!--                    <text class="text">折叠内容主体，这是一段比较长内容。默认折叠主要内容，只显示当前项标题。点击标题展开，才能看到这段文字。再次点击标题，折叠内容。</text>-->
<!--                </view>-->
<!--            </uni-collapse-item>-->
<!--        </uni-collapse>-->
    </view>
</template>

<script setup lang="ts">
    import {ref} from "vue"
    let aa = ref({
        marginTop: '20px'
    })
    let content = ref("33333333333")
    let value = ref(['0'])
    const handleChange = (e:any) => {
        console.log(e);
    }
</script>

<style scoped lang="less">
    :deep(.u-collapse-item__content__text){
        padding:0px;
    }
</style>